<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>虚拟资源</title>
		<link rel="stylesheet" href="../../css/index.css"/>
		<link rel="stylesheet" href="../../js/plugins/animateTip/default-style/css/content.css" />
	</head>
	<body class="of-h">
		<!--页面主体内容显示区域-->
		<div class="virtual-itr pos-re of-h">
			<div class="search-panel">
				<div class="input-box">
					<input class="import-box w-128 pr-30" type="text" placeholder="用户名"/>
					<a class="search-down up"><i class="search-down-icon com_icon"></i></a>
				</div>
				<a class="search-btn search_icon"></a>
			</div>
			<div class="resources-show-panel">
				<div class="card-box pos-re of-h pb-30">
					<!--虚拟资源(计算)卡片展示-->
					<div class="quota-content-list">
						<div class="quota-header">
							<h2 class="quota-title">计算</h2>
							<div class="quota-tip">
								<a class="quota-news select_icon" data-tip="当前计算资源已达到推荐使用上限，继续使用可能存在风险，请慎重"></a>
								<a class="quota-prompt select_icon" data-tip="实际使用中会有损耗"></a>
							</div>
						</div>
						<!--环形图进度展示-->
						<div class="quota-box">
							<div class="quato-item">
								<div id="cpuPercent" class="img-show"></div>
								<label class="quota-label f-w-b">CPU</label>
								<label class="quota-label">20核/20核</label>
							</div>
							<div class="quato-item">
								<div id="memoryPercent" class="img-show"></div>
								<label class="quota-label f-w-b">内存</label>
								<label class="quota-label">1000G/1000G</label>
							</div>
							<div class="quato-item">
								<div id="diskPercent" class="img-show"></div>
								<label class="quota-label f-w-b">硬盘</label>
								<label class="quota-label">1T/1T</label>
							</div>
						</div>
					</div>
					<!--虚拟资源(卷组)卡片展示-->
					<div class="quota-content-list">
						<div class="quota-header">
							<h2 class="quota-title">卷组</h2>
						</div>
						<!--环形图进度展示-->
						<div class="quota-box">
							<div class="quato-item">
								<div id="chartVolume" class="img-show"></div>
								<label class="quota-label f-w-b">卷组</label>
								<label class="quota-label">160/1000</label>
							</div>
							<div class="quato-item">
								<div id="chartVolumeSnapshot" class="img-show"></div>
								<label class="quota-label f-w-b">卷组快照</label>
								<label class="quota-label">40/1000</label>
							</div>
							<div class="quato-item">
								<div id="chartVolumeAll" class="img-show"></div>
								<label class="quota-label f-w-b">卷组与卷组快照总大小</label>
								<label class="quota-label">4096MB/1000000MB</label>
							</div>
						</div>
					</div>
					<!--虚拟资源(计算)卡片展示-->
					<div class="quota-content-list">
						<div class="quota-header">
							<h2 class="quota-title">网络</h2>
						</div>
						<!--环形图进度展示-->
						<div class="quota-box">
							<div class="quato-item ml-80">
								<div id="chartSafetyGroup" class="img-show"></div>
								<label class="quota-label f-w-b">安全组</label>
								<label class="quota-label">60/88</label>
							</div>
							<div class="quato-item ml-30">
								<div id="chartIPCount" class="img-show"></div>
								<label class="quota-label f-w-b">外网IP个数</label>
								<label class="quota-label">100/1660</label>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="../../js/libs/jquery-1.11.1.min.js" type="text/javascript"></script>
	<script src="../../js/libs/excanvas.min.js" type="text/javascript"></script>
	<script src="../../js/view/common/function.js" type="text/javascript"></script>
	<script src="../../js/libs/jquery-ui/jquery.ui.position.min.js" type="text/javascript"></script>
	<script src="../../js/plugins/animateTip/default-style/js/jquery.animateTip.js" type="text/javascript"></script>
	<script src="../../js/plugins/niceScroll/js/jquery.nicescroll.js" type="text/javascript"></script>
	<script src="../../js/view/resourceView/virtualResource.js" type="text/javascript"></script>
</html>